/* This section begins the css code for layout of all page except the index.html/home page  */


/* The <div> element is a block-level and is often used as a container for other HTML elements
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content.
In the following CSS element I will dictate the text size as well as the padding and background color 
for many of the pages found in the publish folder*/

fontsize {
  font-size: 20px;
 background-color:linen;   
 padding:30px;
}

body {
  margin: 5px;
  background-color: rgb(102, 204, 204);

}

.navbar {
    list-style-type: none;
    display: inline;
     margin: 0;
    padding: 0;
    overflow: hidden;
    width: 30px;
    background-color: #dddddd;
      width: 100%; /* Full width */
 }

.navbar li {display: inline;
}

.navbar li a {
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to (white) on hover */
li a:hover {
    background-color: white;
}

strong { 
    font-weight: bold;
}
a {
    text-decoration: none;
}

#content a {
    font-weight: bold;
}

.center {
    margin: auto;  /*To horizontally center a block element
			 (like <div>), use margin: auto;*/
    width:35%;
    padding: 5px;
    }

.centerapproachmarker{
    margin: auto;
    width:25%;
    padding: 5px;
    }

.centerPhotos {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding: 5px;
  }
  

/* photoframe will frame  Jack's photo */
#photoframe {
        margin: auto;
	box-sizing: content-box;    
	padding: 10px;    
	border: 10px double grey;
	text-align: center;  /*To just center the text inside an element,
					 use text-align: center;*/

	background-color: linen;
	width: 60%;  /* The width of the photo frame will be 60% of the
				 screen width */
}    

.centerTables{
    margin: auto;
    width: 80%;/*For tables this is the width into which the tables have to fit.  
    A large % spreads the table.  A small % narrows the table. For photos this is 
    the horizontal distance from the right margin. */
    padding: 5px;    
    }

.textframe {
    margin: auto; /*The CSS auto value is used to horizontally centers the content.*/
    box-sizing: content-box;    
    padding: 50px;

    border: 10px double grey;  /* border is the box around the content.
		You can specify the thickness in px, type, and color.*/  
    text-align: left;
    background-color:linen;
    width: 75%;

}

#headerframe {
    margin: auto;
    box-sizing: content-box;    
    padding: 5px;    
    border: 10px double grey;
    text-align: center;
    background-color:linen;
    width: 45%;  /* The width of the frame which contains 
	              the text will be 45% of the screen width */

}

ul.square {
    list-style-type: square;
}

h2 {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h3 {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h4 {
	font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}


h5 {
	font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}

p {
    font-family: Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 20px;
}

p.publish {
    font-family: Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 16px;
}

/* This "double" class will put all div containers with the class "double" 
a double border with a width of 45px */

div.double {
border-style: double;
  margin: auto;
    width:45%;
  padding: 5px;
}

/***************************************************************************/
/* This section of the style sheet is reserved for Ranveer Singh's Page*/

/* This "Singh" class will put all div containers with the class "Singh" 
a solid border.  The width of 660px is used because that is the width of Singh's photo.
_____________________________________________________________
You can set the margin property to auto to horizontally center the element within 
its container. The element will then take up the specified width, and the remaining 
space will be split equally between the left and right margins*/

div.Singh {
border-style: solid;
width:660px;
margin: auto;
padding: 5px;
}
/**********Change the Line Spacing for Lift To The Top***************/

div.LiftToTheTop {
  line-height: 1.5;
}
/***************************************************************************/




hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 3px;
}

p.IntroBoxCheckBack {
	font-family: Helvetica, Geneva, Arial, Verdana, sans-  serif;
  font-size: 16px;
  font-style: italic;
}

/* Style the header */
.header {
  /* background-color: #f1f1f1; header background will be white*/
  background-color: linen;
 padding: 20px;
  text-align: center;
}

/* *******************************************************************************/

/* This section begins the css code for layout of the index.html/home page  */

/* Style the header
.header {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
} */

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 35%;
}

/* Middle column */
.column.middle {
  width: 65%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the three columns stack on top of each other 
instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

/********************************************************************************/
               /* This css section is for pages that use tooltip popups*/
/********************************************************************************/

 /*The .tooltip programs how you want the words you typed to look, before the mouse
                                 hoovers over it or them. */ 
.tooltip {
text-decoration:none;   /*The text-decoration property specifies you want to decorate
                                           your text on the page*/
  position:relative;
  color:green;

}
/********************************************************************************/
 
/* Below describes the look of the container that holds the images-whatever is contained in span i.e. the image*/
/*The tooltip word will be given the property of, SPAN--this element is an inline element, and will not start on a new 
line and only takes up as much width as necessary.  The look of the span is described below*/
/*The <span> tag is an inline container used to mark up a part of a text, or a part of a document.*/

/*The tooltip word is placed in a <span> tag so that it will be in an inline container or span (fitting into the sentence as written) with the properties described below it*/

.tooltip span {
  display:none;
  border-radius:6px;  /* This is the radius of the border around the image*/
  color:black; /* This is the color of the border line around the image*/
  background:white; /* This is the color of the background of the border behind the
                                    image*/

}
 

/* .tooltip span img positions the image within the container*/
.tooltip span img {
  float:right
  margin:0px 8px 8px 0;

}
 
.tooltip:hover span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
 border:1px solid black;
  margin-top:12px;
  margin-left:-50px;
  overflow:hidden;
  padding:8px;

}

 /*I took out the properties below and got rid of the container padding around the popup image. The bottom padding was much too wide*/
 /* max-width:575px; This width attribute is the width around the image*/
/* min-height:430px;  This height attribute is the height of the padding around the  image*/



 .tooltip.top .tooltip span{
            bottom: 100%;
            top: auto;
        }

        .tooltip.left .tooltip span{
            bottom: 50%;
            right: 105%;
            margin-bottom: -15px;
        }

        .tooltip.right .tooltip span{
            bottom: 50%;
            left: 105%;
            margin-bottom: -15px;
        }



/* *******************************************************************************/
/* This css section is for floating boxes side by side/
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 50%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* ******************************************************************************* 
					Video Class
This css section is for pages that need a border for videos.  As the user down sizes 
the video window less that the coded player width, this code will rescale the video 
player as the user re sizes the browser window less than the to see how the size of 
the video player will scale when the width is less than 400px.
*******************************************************************************/

video {
  max-width: 100%;
  height: auto;
border: 5px solid black;
}
/* *******************************************************************************/